{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bottom-directional-drawer",
  "type": "registry:component",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/directional-drawer.tsx",
      "content": "'use client';\r\nimport React, {\r\n  createContext,\r\n  useContext,\r\n  useState,\r\n  useEffect,\r\n  ReactNode,\r\n} from 'react';\r\nimport { X } from 'lucide-react';\r\nimport { Drawer as VaulSidebar } from 'vaul';\r\nimport { cn } from '@/lib/utils';\r\n\r\ninterface DrawerContextProps {\r\n  open: boolean;\r\n  setOpen: (open: boolean) => void;\r\n}\r\n\r\nconst DrawerContext = createContext<DrawerContextProps | undefined>(undefined);\r\n\r\nexport const useDirectionalDrawer = () => {\r\n  const context = useContext(DrawerContext);\r\n  if (!context) {\r\n    throw new Error('useDirectionalDrawer must be used within a DirectionalDrawer');\r\n  }\r\n  return context;\r\n};\r\n\r\ninterface DirectionalDrawerProps {\r\n  children: ReactNode;\r\n  open?: boolean;\r\n  setOpen?: (open: boolean) => void;\r\n  direction?: 'left' | 'right' | 'top' | 'bottom';\r\n  outsideClose?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function DirectionalDrawer({\r\n  children,\r\n  open: controlledOpen,\r\n  setOpen: controlledSetOpen,\r\n  direction = 'left',\r\n  outsideClose = true,\r\n  className,\r\n}: DirectionalDrawerProps) {\r\n  const [internalOpen, setInternalOpen] = useState(false);\r\n  const [isDesktop, setIsDesktop] = useState(false);\r\n\r\n  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;\r\n  const setOpen = controlledSetOpen || setInternalOpen;\r\n\r\n  useEffect(() => {\r\n    const mediaQuery = window.matchMedia('(min-width: 768px)');\r\n    const handleMediaChange = (event: MediaQueryListEvent) => {\r\n      setIsDesktop(event.matches);\r\n    };\r\n\r\n    setIsDesktop(mediaQuery.matches);\r\n    mediaQuery.addEventListener('change', handleMediaChange);\r\n\r\n    return () => {\r\n      mediaQuery.removeEventListener('change', handleMediaChange);\r\n    };\r\n  }, []);\r\n\r\n  const trigger = React.Children.toArray(children).find(\r\n    (child: any) => child.type === DrawerTrigger\r\n  );\r\n  const content = React.Children.toArray(children).filter(\r\n    (child: any) => child.type !== DrawerTrigger\r\n  );\r\n\r\n  // Helper function to get positioning and sizing classes\r\n  const getDirectionClasses = () => {\r\n    switch (direction) {\r\n      case 'right':\r\n        return {\r\n          position: 'right-0 bottom-0',\r\n          size: outsideClose \r\n            ? 'sm:w-[450px] w-[90%] h-full' \r\n            : 'w-full h-full',\r\n          border: 'border-l',\r\n          handlePosition: 'top-[40%] left-2',\r\n          handleSize: 'h-16 w-[0.30rem]'\r\n        };\r\n      case 'top':\r\n        return {\r\n          position: 'top-0 left-0',\r\n          size: outsideClose \r\n            ? 'w-full sm:h-[450px] h-[90%]' \r\n            : 'w-full h-full',\r\n          border: 'border-b',\r\n          handlePosition: 'bottom-2 left-[40%]',\r\n          handleSize: 'w-16 h-[0.30rem]'\r\n        };\r\n      case 'bottom':\r\n        return {\r\n          position: 'bottom-0 left-0',\r\n          size: outsideClose \r\n            ? 'w-full sm:h-[450px] h-[90%]' \r\n            : 'w-full h-full',\r\n          border: 'border-t',\r\n          handlePosition: 'top-2 left-[40%]',\r\n          handleSize: 'w-16 h-[0.30rem]'\r\n        };\r\n      case 'left':\r\n      default:\r\n        return {\r\n          position: 'left-0 bottom-0',\r\n          size: outsideClose \r\n            ? 'sm:w-[450px] w-[90%] h-full' \r\n            : 'w-full h-full',\r\n          border: 'border-r',\r\n          handlePosition: 'top-[40%] right-2',\r\n          handleSize: 'h-16 w-[0.30rem]'\r\n        };\r\n    }\r\n  };\r\n\r\n  const directionClasses = getDirectionClasses();\r\n  const vaulDirection = direction === 'right' ? 'right' : \r\n                       direction === 'top' ? 'top' : \r\n                       direction === 'bottom' ? 'bottom' : 'left';\r\n\r\n  return (\r\n    <DrawerContext.Provider value={{ open, setOpen }}>\r\n      {trigger}\r\n\r\n      <VaulSidebar.Root\r\n        open={open}\r\n        direction={vaulDirection}\r\n        onOpenChange={setOpen}\r\n        dismissible={isDesktop ? false : true}\r\n      >\r\n        <VaulSidebar.Portal>\r\n          <VaulSidebar.Overlay\r\n            className='fixed inset-0 dark:bg-black/40 bg-white/50 backdrop-blur-xs z-50'\r\n            onClick={() => setOpen(false)}\r\n          />\r\n          <VaulSidebar.Content\r\n            className={cn(\r\n              `${directionClasses.border} z-50 ${directionClasses.size} fixed ${directionClasses.position} ${\r\n                outsideClose \r\n                  ? 'dark:bg-zinc-950 bg-zinc-100'\r\n                  : ''\r\n              }`,\r\n              className\r\n            )}\r\n          >\r\n            <div\r\n              className={`${\r\n                outsideClose\r\n                  ? 'w-full h-full'\r\n                  : `dark:bg-gray-900 relative bg-white ${directionClasses.border} ${directionClasses.size}`\r\n              }`}\r\n            >\r\n              {isDesktop ? (\r\n                <button\r\n                  className='flex justify-end w-full absolute right-2 top-2'\r\n                  onClick={() => setOpen(false)}\r\n                >\r\n                  <X />\r\n                </button>\r\n              ) : (\r\n                <div\r\n                  className={`absolute ${directionClasses.handlePosition} mx-auto ${directionClasses.handleSize} shrink-0 rounded-full bg-gray-600 my-4`}\r\n                />\r\n              )}\r\n              {content}\r\n            </div>\r\n          </VaulSidebar.Content>\r\n        </VaulSidebar.Portal>\r\n      </VaulSidebar.Root>\r\n    </DrawerContext.Provider>\r\n  );\r\n}\r\n\r\nexport function DrawerContent({\r\n  children,\r\n  className,\r\n}: {\r\n  children: ReactNode;\r\n  className?: string;\r\n}) {\r\n  return <div className={cn('', className)}>{children}</div>;\r\n}\r\n\r\nexport function DrawerTrigger({ children }: { children: ReactNode }) {\r\n  const { setOpen } = useDirectionalDrawer();\r\n  return <div onClick={() => setOpen(true)}>{children}</div>;\r\n}",
      "type": "registry:component"
    },
    {
      "path": "./registry/components/drawer/bottom-directional-drawer.tsx",
      "content": "'use client';\r\nimport { Drawer } from 'vaul';\r\nimport { motion } from 'motion/react';\r\nimport { useState } from 'react';\r\nimport { Edit, X } from 'lucide-react';\r\nimport { useMediaQuery } from '@/hooks/use-media-query';\r\nimport Image from 'next/image';\r\nimport {\r\n  DirectionalDrawer,\r\n  DrawerContent,\r\n  DrawerTrigger,\r\n} from '@/components/ui/directional-drawer';\r\nexport default function index() {\r\n  const [sidebarOpen, setSidebarOpen] = useState(false);\r\n  return (\r\n    <>\r\n      <DirectionalDrawer\r\n        open={sidebarOpen}\r\n        setOpen={setSidebarOpen}\r\n        direction={'bottom'}\r\n        outsideClose={true}\r\n      >\r\n        <DrawerContent className='w-full h-full flex justify-end'>\r\n          <div className='p-5 rounded-t-md grow w-full pt-14'>\r\n            <h1 className='font-medium  text-2xl'>Update Profile Image</h1>\r\n            <p className='text-sm text-muted-foreground'>\r\n              Upload a new profile image or remove the current one.\r\n            </p>\r\n            <div className='p-2 space-y-4 '>\r\n              <span className='relative flex justify-center overflow-hidden rounded-xl w-full '>\r\n                <span className='grid place-content-center h-40  w-40 rounded-xl dark:bg-neutral-800 bg-muted'>\r\n                  JP\r\n                </span>\r\n              </span>\r\n              <div className='mb-3'>\r\n                <input\r\n                  className='w-full border file:p-2 file:bg-black  file:border-none  file:text-white rounded-xs overflow-hidden'\r\n                  type='file'\r\n                  id='formFile'\r\n                />\r\n              </div>\r\n              <button\r\n                type='submit'\r\n                className='w-full rounded-xs dark:bg-white bg-black  p-2 dark:text-black text-white'\r\n              >\r\n                Submit\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </DrawerContent>\r\n      </DirectionalDrawer>\r\n      <div className='flex justify-center'>\r\n        <figure className='h-96 w-96 relative'>\r\n          <Image\r\n            src={'/myself.webp'}\r\n            width={600}\r\n            height={600}\r\n            className='h-full w-full object-cover rounded-lg '\r\n            alt='profile_image'\r\n          />\r\n          <motion.button\r\n            whileTap={{ scale: 0.8 }}\r\n            onClick={() => setSidebarOpen(true)}\r\n            className='absolute left-2 bottom-2 p-4 dark:bg-black bg-white rounded-lg shadow-black'\r\n          >\r\n            <Edit />\r\n          </motion.button>\r\n        </figure>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}